<template>
	<view class="notice">
		<view
			class="notice-item flex-center"
			v-for="(item,index) in noticeList"
			:key="index"
			@click="pageTo(item)">
			<view class="notice-item-icon">
				<image class="notice-item-icon-img" :src="item.icon" mode="aspectFill"></image>
				<view class="notice-item-icon-count" v-if="item.count">
					{{item.count}}
				</view>
			</view>
			<view class="notice-item-right">
				<view class="flex-center-between">
					<text class="notice-item-right-name">
						{{item.name}}
					</text>
					<text class="notice-item-right-datetime">
						{{item.updatetime}}
					</text>
				</view>
				<view class="notice-item-right-con">
					{{item.msg}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList: [
					// {
					// 	name: '漏水报警',
					// 	page: 'alarm',
					// 	icon: '../../static/images/notice-alarm.png',
					// 	count: 0,
					// 	msg: '暂无漏水报警消息',
					// 	updatetime: ''
					// },
					// {
					// 	name: '更换滤芯',
					// 	page: 'replace',
					// 	icon: '../../static/images/notice-replace.png',
					// 	count: 0,
					// 	msg: '暂无更换滤芯消息',
					// 	updatetime: ''
					// },
					// {
					// 	name: '维修保养',
					// 	page: 'maintenance',
					// 	icon: '../../static/images/notice-maintenance.png',
					// 	count: 0,
					// 	msg: '暂无维修保养消息',
					// 	updatetime: ''
					// },
					// {
					// 	name: '平台推送',
					// 	page: 'platform',
					// 	icon: '../../static/images/notice-platform.png',
					// 	count: 0,
					// 	msg: '暂无平台推送消息',
					// 	updatetime: ''
					// },
					{
						name: '服务进度',
						page: 'progress',
						icon: '../../static/images/notice-progress.png',
						count: 0,
						msg: '暂无服务进度消息',
						updatetime: ''
					}
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getNoticeCount()
		},
		methods: {
			/**
			 * 获取用户消息数量
			 */
			async getNoticeCount() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/user_msg/count',
					data: {
						// type: 5,//类型 (1漏水报警 2更换滤芯 3维修保养 4平台推送 5服务进度) 非必填
						// status: 0 //状态(0未读, 1已读)非必填
					}
				})
				if (res.status === 1) {
					// res.data && res.data.forEach(item => {
					// 	console.log(item)
					// 	this.$set(this.noticeList[item.type-1], 'count', item.count)
					// 	this.$set(this.noticeList[item.type-1], 'msg', item.msg.content)
					// 	this.$set(this.noticeList[item.type-1], 'updatetime', item.msg.updatetime_text)
					// })
					// 暂只有服务进度，To be continued
					this.$set(this.noticeList[0], 'count', res.data && res.data[0].count)
					this.$set(this.noticeList[0], 'msg', res.data && res.data[0].msg.content)
					this.$set(this.noticeList[0], 'updatetime', res.data && res.data[0].msg.updatetime_text)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			pageTo(item) {
				// if(!item.count) {
				// 	return
				// }
				uni.navigateTo({
					url: item.page
				});
			},
		}
	}
</script>

<style lang="scss">
	.notice{
		background: $uni-bg-color;
		padding: 0 40rpx;
		.notice-item{
			height: 162rpx;
			border-bottom: 1rpx solid $uni-border-color;
			&:last-child{
				border-bottom: none;
			}
			.notice-item-icon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background: $uni-bg-color-grey;
				position: relative;
				&-img{
					width: 80rpx;
					height: 80rpx;
				}
				&-count{
					position: absolute;
					top: 0;
					right: 0;
					height: 30rpx;
					line-height: 30rpx;
					padding: 0 6rpx;
					border-radius: 15rpx;
					font-size: $uni-font-size-sm1;
					color: #fff;
					background: #f74c45;
				}
				
			}
			.notice-item-right{
				width: 560rpx;
				margin-left: 30rpx;
				.notice-item-right-datetime,
				.notice-item-right-con{
					font-size: $uni-font-size-sm2;
					color: $uni-text-color-grey;
				}
			}
		}
	}
</style>
